import React,{memo} from 'react'
import { NavLink } from 'react-router-dom'
import {HeaderWrapper,HeaderLeft,HeaderRight} from './style'
import {headerLink} from '@/common/loacl-data'
import { Input } from 'antd';
import { SearchOutlined} from '@ant-design/icons';

export default memo(function HYAppHeader(){
    //业务代码
    function mapHeadderLink(item,index){
            if (index<=2 ||index===5) {
                return (
                <NavLink to={item.link}>{item.title}
                <i className="sprite_01 icon"></i></NavLink>
                
                )
            }

            if (2<index<5) {
                return <a href={item.link}>{item.title}</a>
            }
    }
    function login(){
        console.log(1);
    }
    return (
        <div>
            <HeaderWrapper>
                <div className="content wrap-v1">
                    <HeaderLeft>
                        <a href="/" className='logo '>网易云音乐</a>
                        {
                            headerLink.map((item,index)=>{
                                return (
                                    <div key={item.title} className='linkItem'>
                                        {mapHeadderLink(item,index)}
                                    </div>
                                )
                            })
                        }
                    </HeaderLeft>
                    <HeaderRight>
                        <div className='divSearch'>
                            <Input className='search' prefix={<SearchOutlined/> } placeholder="音乐/视频/电台/用户"></Input>
                        </div>
                        <div className='center'>创作者中心</div>
                        <div className='login' onClick={()=>login()}>登录</div>
                        
                    </HeaderRight>
                </div>
                <div className="divider"></div>
            </HeaderWrapper>
            
        </div>
    )
    

}


)
